<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2rism</title>

  <link href="./css/main.css" rel="stylesheet">
  <link href="./css/media.css" rel="stylesheet">
  <!-- Подключаем стили плагина autoComplete -->
  <link href="./libs/autoComplete/css/autoComplete.01.css" rel="stylesheet">
  <link href="./libs/custom-select/custom-select.css" rel="stylesheet">
</head>

<body>
  <header class="header">
    <div class="container container--header">
      <nav class="nav">
        <a class="logo" href="#!">
          <img class="logo__img" src="./img/logo.svg" alt="Logo 2rism">
        </a>

        <ul class="nav-list">
          <li class="nav-list__item">
            <a class="nav-list__link nav-list__link--active" href="#!">home</a>
          </li>
          <li class="nav-list__item">
            <a class="nav-list__link" href="#!">hotels</a>
          </li>
          <li class="nav-list__item">
            <a class="nav-list__link" href="#!">restaurants</a>
          </li>
          <li class="nav-list__item">
            <a class="nav-list__link" href="#!">tours</a>
          </li>
          <li class="nav-list__item">
            <a class="nav-list__link" href="#!">destinations</a>
          </li>
          <li class="nav-list__item">
            <a class="nav-list__link" href="#!">activities</a>
          </li>
          <li class="nav-list__item">
            <a class="nav-list__link" href="#!">contact</a>
          </li>
        </ul>

        <div class="nav__user">
          <div class="user">
            <div class="user__content">
              <span class="user__greeting">Holla,</span>
              <span class="user__name">Ales Nesetril</span>
            </div>
            <div class="user__avatar">
              <img class="user__img" src="./img/icons/avatar.jpg" alt="Image avatar">
            </div>
          </div>
        </div>

        <div class="nav__icon">
          <button class="mobile-nav-btn">
            <span class="mobile-nav-line"></span>
            <span class="mobile-nav-line"></span>
            <span class="mobile-nav-line"></span>
          </button>
        </div>
      </nav>

      <div class="header__content">
        <h1 class="header__title">
          Discover the most engaging places
        </h1>

        <button class="button button--huge">
          <img src="./img/header/global.svg" alt="Image global">
          Discover on 3D Globe
        </button>
      </div>

      <form class="form" action="">
        <div class="form__input-wrapper form__input--location">
          <label class="form__label" for="location">Location</label>
          <input class="form__input" type="text" id="location" placeholder="Explore nearby destinations">
        </div>

        <div class="form__input-wrapper form__input--activity">
          <label class="form__label" for="activity">Activity</label>
          <select class="form__select" name="activity" id="activity">
            <option value="All">All Activities</option>
            <option value="Culture">Culture</option>
            <option value="Sport">Sport</option>
            <option value="Extreme">Extreme</option>

          </select>
        </div>

        <div class="form__input-wrapper form__input--date">
          <label class="form__label" for="date">When</label>
          <input class="form__input" type="text" id="date" placeholder="Choose a Date">
        </div>

        <div class="form__input-wrapper form__input--guests">
          <label class="form__label" for="guests">Guests</label>
          <select class="form__select" name="guests" id="guests">
            <option value="1 quest">1 quest</option>
            <option value="2 quest">2 quest</option>
            <option value="3 quest">3 quest</option>
            <option value="4 quest or more">4 quest or more</option>
          </select>
        </div>

        <button class="button button--search">
          <img class="button__icon" src="./img/icons/search.svg" alt="Search">
        </button>
      </form>
    </div>
  </header>

  <!-- Верстаем мобильную навигацию. Блок "mobile-nav-fade" нужен для плавного затемнения экрана -->
  <div class="mobile-nav-fade"></div>
  <div class="mobile-nav">
    <ul class="mobile-nav__list">
      <li><a class="active" href="#!">home</a></li>
      <li><a href="#!">hotels</a></li>
      <li><a href="#!">restaurants</a></li>
      <li><a href="#!">tours</a></li>
      <li><a href="#!">destinations</a></li>
      <li><a href="#!">activities</a></li>
      <li><a href="#!">contact</a></li>
    </ul>
  </div>

  <main>
    <section class="popular">
      <div class="container popular--container">
        <h2 class="popular__title">
          Popular Destinations
        </h2>

        <div class="popular__cards">
          <div class="popular__card card">
            <!-- Делаем карточку ссылкой -->
            <a class="card__link" href="#"></a>
            <img src="./img/popular/01.jpg" alt="Big Sur">
            <h3 class="popular__card-title">Big Sur</h3>
            <!-- Делаем отдельную ссылку на локацию -->
            <a class="card-location" href="#California">California, USA</a>
          </div>

          <div class="popular__card card">
            <!-- Делаем карточку ссылкой -->
            <a class="card__link" href="#"></a>
            <img src="./img/popular/02.jpg" alt="Prescott">
            <h3 class="popular__card-title">Prescott</h3>
            <!-- Делаем отдельную ссылку на локацию -->
            <a class="card-location" href="#Arizona">Arizona, USA</a>
          </div>

          <div class="popular__card card">
            <!-- Делаем карточку ссылкой -->
            <a class="card__link" href="#"></a>
            <img src="./img/popular/03.jpg" alt="Fort Mayers">
            <h3 class="popular__card-title">Fort Mayers</h3>
            <!-- Делаем отдельную ссылку на локацию -->
            <a class="card-location" href="#Florida">Florida, USA</a>
          </div>

          <div class="popular__card card">
            <!-- Делаем карточку ссылкой -->
            <a class="card__link" href="#"></a>
            <img src="./img/popular/04.jpg" alt="Tucson">
            <h3 class="popular__card-title">Tucson</h3>
            <!-- Делаем отдельную ссылку на локацию -->
            <a class="card-location" href="#Arizona">Arizona, USA</a>
          </div>

          <div class="popular__card card">
            <!-- Делаем карточку ссылкой -->
            <a class="card__link" href="#"></a>
            <img src="./img/popular/05.jpg" alt="St. Joseph">
            <h3 class="popular__card-title">St. Joseph</h3>
            <!-- Делаем отдельную ссылку на локацию -->
            <a class="card-location" href="#Michigan">Michigan, USA</a>
          </div>

          <div class="popular__card card">
            <!-- Делаем карточку ссылкой -->
            <a class="card__link" href="#"></a>
            <img src="./img/popular/06.jpg" alt="Madrid">
            <h3 class="popular__card-title">Madrid</h3>
            <!-- Делаем отдельную ссылку на локацию> -->
            <a class="card-location" href="#Spain">Spain</a>
          </div>
        </div>
      </div>
    </section>

    <section class="hotels">
      <div class="container">
        <div class="hotels__header header-section">
          <h2 class="header-section__title">Hotels and Restaurants</h2>

          <a class="button-more" href="#!">
            View all
            <img src="./img/icons/arrow-right.svg" alt="arrow-right">
          </a>
        </div>

        <div class="hotels__cards">
          <div class="hotels__card card">
            <!-- Делаем карточку ссылкой -->
            <a class="card__link" href="#"></a>
            <img class="card__img" src="./img/hotels/01.jpg" alt="Monastero Santa Rosa Hotel">

            <h3 class="card__title">Monastero Santa Rosa Hotel&nbsp;&&nbsp;Spa</h3>

            <div class="hotels__content">
              <!-- Делаем отдельную ссылку на локацию> -->
              <a class="card-location hotels__card-location" href="#Salerno">Salerno, Italy</a>
              <div class="stars-rating">
                <img class="star" src="./img/hotels/star.svg" alt="star">
                <img class="star" src="./img/hotels/star.svg" alt="star">
                <img class="star" src="./img/hotels/star.svg" alt="star">
                <img class="star" src="./img/hotels/star.svg" alt="star">
                <img class="star" src="./img/hotels/star.svg" alt="star">
              </div>
            </div>
          </div>

          <div class="hotels__card card">
            <!-- Делаем карточку ссылкой -->
            <a class="card__link" href="#"></a>
            <img class="card__img" src="./img/hotels/02.jpg" alt="Hotel Tremezzo">

            <h3 class="card__title">Grand Hotel Tremezzo</h3>

            <div class="hotels__content">
              <!-- Делаем отдельную ссылку на локацию> -->
              <a class="card-location hotels__card-location" href="#LakeComo">Lake Como, Italy</a>
              <div class="stars-rating">
                <img class="star" src="./img/hotels/star.svg" alt="star">
                <img class="star" src="./img/hotels/star.svg" alt="star">
                <img class="star" src="./img/hotels/star.svg" alt="star">
                <img class="star" src="./img/hotels/star-off.svg" alt="star-of">
                <img class="star" src="./img/hotels/star-off.svg" alt="star-of">
              </div>
            </div>
          </div>

          <div class="hotels__card card">
            <!-- Делаем карточку ссылкой -->
            <a class="card__link" href="#"></a>
            <img class="card__img" src="./img/hotels/03.jpg" alt="Oberoi Udaivilas">

            <h3 class="card__title">The Oberoi Udaivilas, Udaipur</h3>

            <div class="hotels__content">
              <!-- Делаем отдельную ссылку на локацию> -->
              <a class="card-location hotels__card-location" href="#Udaipur">Udaipur, India</a>
              <div class="stars-rating">
                <img class="star" src="./img/hotels/star.svg" alt="star">
                <img class="star" src="./img/hotels/star.svg" alt="star">
                <img class="star" src="./img/hotels/star.svg" alt="star">
                <img class="star" src="./img/hotels/star.svg" alt="star">
                <img class="star" src="./img/hotels/star-off.svg" alt="star-off">
              </div>
            </div>
          </div>

          <div class="hotels__card card">
            <!-- Делаем карточку ссылкой -->
            <a class="card__link" href="#"></a>
            <img class="card__img" src="./img/hotels/04.jpg" alt="AKA Beverly Hills">

            <h3 class="card__title">AKA Beverly Hills</h3>

            <div class="hotels__content">
              <!-- Делаем отдельную ссылку на локацию> -->
              <a class="card-location hotels__card-location" href="#LosAngeles">Los Angeles, United States</a>
              <div class="stars-rating">
                <img class="star" src="./img/hotels/star.svg" alt="star">
                <img class="star" src="./img/hotels/star.svg" alt="star">
                <img class="star" src="./img/hotels/star.svg" alt="star">
                <img class="star" src="./img/hotels/star-off.svg" alt="star-off">
                <img class="star" src="./img/hotels/star-off.svg" alt="star-off">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="tips">
      <div class="container">
        <div class="tips__header header-section">
          <h2 class="header-section__title">Travel Tips and Advice</h2>

          <a class="button-more" href="#!">
            View all
            <img src="./img/icons/arrow-right.svg" alt="arrow-right">
          </a>
        </div>

        <div class="tips__cards">
          <div class="tips__card card">
            <a class="card__link" href="#!"></a>
            <img class="tips__card-img" src="./img/tips/img.jpg" alt="East Village">

            <div class="tips__card-description">
              <h3 class="tips__card-title">East Village Ice Cream Crawl</h3>

              <p class="tips__card-text">
                We will stop at five different world-class ice cream shops on this 1.5 mile 1.5 hour tour. At each ice
                cream store we'll
                explore the story behind the business and see what makes the ice cream unique as you savor every…
              </p>

              <div class="tips__card-items">
                <a class="tips__card-item-link" href="#date">
                  <img src="./img/tips/calendar.svg" alt="calendar">
                  Today
                </a>

                <a class="tips__card-item-link" href="#autor">
                  <img src="./img/tips/user.svg" alt="user">
                  Maria Philips
                </a>

                <a class="tips__card-item-link" href="#comments">
                  <img src="./img/tips/comments.svg" alt="comments">
                  2
                </a>
              </div>
            </div>
          </div>

          <div class="tips__card card">
            <a class="card__link" href="#!"></a>
            <img class="tips__card-img" src="./img/tips/img-1.jpg" alt="Brooklyn Bridge">

            <div class="tips__card-description">
              <h3 class="tips__card-title">Brooklyn Bridge cinematic photo walk</h3>

              <p class="tips__card-text">
                This experience takes place at the Brooklyn Bridge Park and Brooklyn Bridge, but I’m always open to
                capture clients at
                different locations upon request for an additional charge.
              </p>

              <div class="tips__card-items">
                <a class="tips__card-item-link" href="#date">
                  <img src="./img/tips/calendar.svg" alt="calendar">
                  Today
                </a>

                <a class="tips__card-item-link" href="#autor">
                  <img src="./img/tips/user.svg" alt="user">
                  James Calzoni
                </a>

                <a class="tips__card-item-link" href="#comments">
                  <img src="./img/tips/comments.svg" alt="comments">
                  17
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="activities">
      <div class="container">
        <div class="header-section">
          <h2 class="header-section__title">Activities</h2>

          <a class="button-more" href="#!">
            View all
            <img src="./img/icons/arrow-right.svg" alt="arrow-right">
          </a>
        </div>

        <div class="activities__cards">
          <div class="activities__card card">
            <!-- Делаем карточку ссылкой -->
            <a class="card__link" href="#"></a>
            <img class="card__img card__img--activities" src="./img/activities/01.jpg" alt="Sailing">

            <h3 class="card__title">Sailing</h3>
          </div>

          <div class="activities__card card">
            <!-- Делаем карточку ссылкой -->
            <a class="card__link" href="#"></a>
            <img class="card__img card__img--activities" src="./img/activities/02.jpg" alt="Climbing">

            <h3 class="card__title">Climbing</h3>
          </div>

          <div class="activities__card card">
            <!-- Делаем карточку ссылкой -->
            <a class="card__link" href="#"></a>
            <img class="card__img card__img--activities" src="./img/activities/03.jpg" alt="Skiing">

            <h3 class="card__title">Skiing</h3>
          </div>

          <div class="activities__card card">
            <!-- Делаем карточку ссылкой -->
            <a class="card__link" href="#"></a>
            <img class="card__img card__img--activities" src="./img/activities/04.jpg" alt="Hiking">

            <h3 class="card__title">Hiking</h3>
          </div>
        </div>
      </div>
    </section>

    <section class="about">
      <div class="container container--about">
        <div class="about__description">
          <h2 class="about__title">About Us</h2>
          <p class="about__text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a sapien justo. Nulla facilisis
            tristique imperdiet. Nullam a placerat odio. Sed in ex augue. Aliquam porta consectetur lorem sit amet
            ultrices. Class aptent
            taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
          </p>
          <a class="button-more" href="#!">
            Read more
            <img src="./img/icons/arrow-right.svg" alt="arrow-right">
          </a>
        </div>

        <img class="about__img" src="./img/about-us/img.jpg" alt="photo of the team">
      </div>
    </section>
  </main>

  <footer class="footer none">
    <div class="container">
      <div class="footer__row">
        <div class="footer__copyright">
          <a class="logo" href="#!">
            <img class="logo__img" src="./img/logo-footer.svg" alt="Logo 2rism">
          </a>

          <p class="footer__features">
            We always make our customers happy by providing as many choises as possible
          </p>

          <div class="socials">
            <a class="socials__link" href="#!">
              <img class="facebook" src="./img/icons/facebook.svg" alt="facebook">
            </a>
            <a class="socials__link" href="#!">
              <img class="twitter" src="./img/icons/twitter.svg" alt="twitter">
            </a>
            <a class="socials__link" href="#!">
              <img class="instagram" src="./img/icons/instagram.svg" alt="instagram">
            </a>
          </div>
        </div>

        <div class="footer__nav-wrapper">
          <div class="footer__nav">
            <h3 class="footer__nav-title">About</h3>
            <ul class="footer__nav-list">
              <li class="footer__nav-item">
                <a class="footer__nav-link" href="#!">About Us</a>
              </li>
              <li class="footer__nav-item">
                <a class="footer__nav-link" href="#!">Features</a>
              </li>
              <li class="footer__nav-item">
                <a class="footer__nav-link" href="#!">News</a>
              </li>
              <li class="footer__nav-item">
                <a class="footer__nav-link" href="#!">Menu</a>
              </li>
            </ul>
          </div>

          <div class="footer__nav">
            <h3 class="footer__nav-title">Company</h3>
            <ul class="footer__nav-list">
              <li class="footer__nav-item">
                <a class="footer__nav-link" href="#!">Why 2rism</a>
              </li>
              <li class="footer__nav-item">
                <a class="footer__nav-link" href="#!">Partner With Us</a>
              </li>
              <li class="footer__nav-item">
                <a class="footer__nav-link" href="#!">FAQ</a>
              </li>
              <li class="footer__nav-item">
                <a class="footer__nav-link" href="#!">Blog</a>
              </li>
            </ul>
          </div>

          <div class="footer__nav">
            <h3 class="footer__nav-title">Support</h3>
            <ul class="footer__nav-list">
              <li class="footer__nav-item">
                <a class="footer__nav-link" href="#!">Account</a>
              </li>
              <li class="footer__nav-item">
                <a class="footer__nav-link" href="#!">Support Center</a>
              </li>
              <li class="footer__nav-item">
                <a class="footer__nav-link" href="#!">Feedback</a>
              </li>
              <li class="footer__nav-item">
                <a class="footer__nav-link" href="#!">Contact Us</a>
              </li>
            </ul>
          </div>
        </div>

        <div class="footer__subscribe">
          <h3 class="footer__subscribe-title">Subscribe on our destination review newsletters</h3>
          <form class="subscribe" action="">
            <div class="subscribe__input-wrapper">
              <input class="subscribe__input" type="email" id="email" value="johndoe@gmail.com" required
                autocomplete="email">
              <label class="subscribe__label" for="email">Your Email</label>
              <img src="./img/icons/mail.svg" alt="mail">
            </div>

            <button class="button button--subscribe" type="submit">
              <img class="button__icon" src="./img/icons/arrow-white.svg" alt="send">
            </button>
          </form>
        </div>
      </div>
    </div>
  </footer>

  <!-- Подключаем библиотеку autoComplete-->
  <script src="./libs/autoComplete/autoComplete.min.js"></script>

  <script src="./libs/custom-select/custom-select.min.js"></script>
  <script src="./libs/easepick/easepick.min.js"></script>
  <!-- Подключаем файл с инициализацией плагина autoComplete -->
  <script src="./js/input-dest.js"></script>
  <script src="./js/mobile-nav.js"></script>
  <script src="./js/main.js"></script>
</body>

</html>